<template>
	<view class="personal-card figure-info--person flex--col" v-show="loading">
			<view class="person-intro person-intro--profile flex--row">
				<view class="intro-desc">
					<view class="intro-desc-item">
						<text class="intro-name">{{userInfo.name}}</text>
					</view>
					<view class="intro-desc-item">
						<text class="intro-career">{{userInfo.age}}岁  {{userInfo.career}}</text>
						<text class="intro-logan">{{userInfo.profile}}</text>
					</view>
				</view>
				<view class="intro-avatar ">
					<image mode="scaleToFill" :src="userInfo.avatar" aria-label="用户头像"></image>
				</view>
			</view>
			
			<view class="person-intro person-intro--summary flex--row">
				<view class="person-summary-item">
					<text class="summary-value">{{userInfo.count}}</text>
					<text class="summary-desc">出行次数</text>
				</view>
				<view class="person-summary-item">
					<text class="summary-value">{{userInfo.score}}</text>
					<text class="summary-desc">出行评分</text>
				</view>
				<view class="person-summary-item">
					<text class="summary-value">{{userInfo.often}}</text>
					<text class="summary-desc">最常出游</text>
				</view>
			</view>

	</view>
	
</template>

<script>
	import * as UserApi from "@/api/user/user.js"
	import {REFRESH_PERSONALCARD} from "@/core/constant/event.js"
	export default{
		props:['userId'],
		data(){
			return {
				userInfo:null,
				loading:false,
			}
		},
		methods:{
			async getUserInfo(){
				this.loading = false
				this.userInfo = await UserApi.briefInfo(this.userId)
				this.loading = true
			},
		},
		async created(){
			await this.getUserInfo()
			uni.$on(REFRESH_PERSONALCARD,async () => {
				await this.getUserInfo()
			})
		}
		
	}
</script>

<style lang="scss" scoped>
		.personal-card{
			background-color: #ffffff;
			@include border-four-roundings;
			width:100%;
			box-sizing: border-box;
			padding:20px;
			gap:12px;
		}
		
		
		.person-intro{
				text{
					display: block;
					line-height: 1.4;	
				}
			
				&--profile{
					justify-content:space-between;
					align-items: center;
					
					.intro-desc{
						width:60%;
						flex:1;
					}
					
					.intro-desc-item{
						margin-bottom: 12px;
					}
					
					.intro-name{
						font-size:24px;
						font-weight:700;
						color:#333;
					}
					
					.intro-logan{
						font-size: 16px;
						color:#555;
						font-weight:100;
						letter-spacing:0.6px;
						
					}
					.intro-career{
						font-size: 16px;
						color:#777;
					}
				
					.intro-avatar{
						border-radius: 50%;
						overflow: hidden;
						height:64px;
						width:64px;
						
						image{
							width:100%;
							height: 100%;
						}
					}
				}
				
				&--summary{
					justify-content: space-around;
					align-items: flex-end;
					.person-summary-item{
						  flex:1;
						  text-align: left;
						  color:#666;
		
						 .summary-value{
							color:#444;
							font-size: 20px;
						 }
						 
						 .summary-desc{
							font-size: 14px;
							font-weight: 100;
						 }
					}
				
				}
		}
		
	
</style>